<!--
 * @Author: your name
 * @Date: 2022-04-26 17:06:07
 * @LastEditTime: 2022-04-27 09:49:09
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vite\src\components\shop.vue
-->

<template>
    <div>
        <ul v-if="!isLoading">
        <li v-for="item in foods" :key="item.id">
        <span>{{item.title}}：</span>
        <span>单价{{item.price}}--</span>
        <span>数量{{item.nums}}</span>----
        <button @click="addToCar(item.id)" :disabled="item.nums===0">加入购物车</button>
        </li>
    </ul>
  <p v-if="isLoading">加载中</p>
    </div>
</template>


<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import {defineExpose} from 'vue'
import {shopStore} from '../store/shops'
import {carStore} from '../store/cars'

    const shops = shopStore()
    const {foods,isLoading} = storeToRefs(shops)
    defineExpose({foods,isLoading})
    shops.loadFoods()
    
    const car = carStore()
    function addToCar(id: string): void {
      car.addToCar(id);
    }


</script>
